<template>
  <div>
    <el-row>
      <el-col :span="8">
        <!--    部分参数
                action:图片上传的地址   string
                multiple 是否支持多选文件   true/false
                headers 上传的请求头  object
                data 上传附带的参数 object
                name 上传的文件名 string
                drag 是否开启拖拽 true/false
                accept 接收上传的文件类型 string

                on-preview 点击文件列表 中已经上传的钩子 function
                on-remove 文件列表 移除的钩子
                on-sucess 文件上传成功的钩子
                on-error 文件上传失败的钩子
                on-change 文件状态改变的钩子
                list-type 文件类型   string
                before-remove 删除文件之前的钩子 参数:上传的文件和文件列表
                on-exceed 文件超出限制的钩子
                limit 最大允许上传数 number
                disabled 是否禁用  true/false
         -->
        <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList"
            list-type="picture"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-col>
      <el-col :span="8">
        <el-upload
            class="upload-demo"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-col>
      <el-col :span="8">
        <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-change="handleChange"
            :file-list="fileList2">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-col>
    </el-row>

    <el-divider/>

    <el-row>
      <el-col :span="8">
        <img src="../assets/pic/1.jpg"/>
        <el-button type="primary" @click="downloadRest" size="small">下载图片</el-button>
      </el-col>
      <el-col :span = "8">
       <div>
         <a href="./baidu_jgylogo3.gif" download = "1.jpg" >下载图片</a>
       </div>

      </el-col>
    </el-row>
  </div>
</template>

<script>
const PIC_URL = 'D:\\demo_a\\vue\\vue\\src\\assets\\pic\\1.jpg'
export default {
  name: "downLoadFile",
  data() {
    return {
      fileList: [{
        name: 'food.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
      },],
      fileList2: [{
        name: 'food.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
      },]
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleChange(file, fileList) {
      this.fileList2 = fileList.slice(-3);
    },
    // 下载文件
    downloadRest() {
      // this.$http({
      //   url: PIC_URL,
      //   method: 'get',
      //   responseType: 'arraybuffer',
      //
      // }).then(res => {
      //   console.log(res)
      // }).catch(err => {
      //   console.log(err)
      // })
      window.location.href = "https://cn.bing.com/images/search?view=detailV2&ccid=Oiy0ZhrB&id=136E9F876F0147597C4EDEA4E2B7323D70B00014&thid=OIP.Oiy0ZhrBtSBpBjAkDAR7xAHaEo&mediaurl=https%3a%2f%2fwww.yulumi.cn%2fgl%2fuploads%2fallimg%2f201128%2f1622551950-3.jpg&exph=1200&expw=1920&q=%e9%a3%8e%e6%99%af%e5%9b%be&simid=608047290937400758&FORM=IRPRST&ck=A87C8F1B0D90836298D1D13AF75BCC00&selectedIndex=45"
    },
  }
}
</script>

<style scoped>
img {
  width: 320px;
  height: 200px;
}
</style>
